<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <SearchForm
          v-show="showSearch"
          v-model="queryParams"
          :options="options.formOps"
          @onQuery="getList"
        >
        </SearchForm>
        <el-row :gutter="10" class="mb8">
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <Table
          ref="table"
          :auto-featch="true"
          :fetch-data="fetchData"
          :options="options.table"
          :actionWidth="200"
        >
          <template #beforehiddenLevel>
            <el-table-column
              label="装置"
              prop="deviceId"
              align="center"
              width="150"
              key="deviceId"
              show-overflow-tooltip
            >
              <template #default="{ row }">
                {{ columnZz(row.deviceId) }}
              </template>
            </el-table-column>
            <el-table-column
              label="隐患分类"
              prop="hiddenType"
              align="center"
              width="150"
              key="hiddenType"
            >
            </el-table-column>
          </template>
          <template #afterhiddenRectificationMeasures>
            <el-table-column
              label="整改责任人"
              prop="rectificationUserName"
              align="center"
              width="150"
              key="rectificationUserName"
            >
            </el-table-column>

            <el-table-column
              label="复核人"
              width="150"
              prop="reviewUserName"
              align="center"
              key="reviewUserName"
            >
            </el-table-column>
            <el-table-column
              label="审批状态"
              width="150"
              prop="reviewUserName"
              align="center"
              key="reviewUserName"
            >
              <template #default="{ row }">
                <span v-if="row.hiddenState == 1">已通过</span>
                <span v-else-if="row.hiddenState == 2">已驳回</span>
                <span v-else>待审批</span>
              </template>
            </el-table-column>
          </template>

          <template #actionButton="{ row }">
            <template
              v-if="
                row.hiddenState != 1 &&
                row.hiddenState != 2 &&
                row.hiddenState != 3
              "
            >
              <el-button type="text" @click="openApprovalDialog(1, row)"
                >通过</el-button
              >
              <el-button type="text" @click="openApprovalDialog(2, row)"
                >驳回</el-button
              >
            </template>
            <el-button type="text" icon="Edit" @click="openDialog(row)"
              >流转</el-button
            >
            <!-- <el-button
              type="text"
              icon="Edit"
              @click="handleEdit(row)"
              :disabled="row.hiddenState != 1"
              >确认整改完成</el-button
            > -->
          </template>
        </Table>
      </el-col>
    </el-row>
    <el-dialog v-model="dialogFormVisible" title="流转人">
      <el-input
        placeholder="请选择"
        v-model="liuzhuanForm.rectificationUserName"
        readonly
        @click="onInnerOpen('reviewUser')"
      >
      </el-input>
      <TableSelect
        ref="userTableSelect"
        :queryApi="listUser"
        :options="[]"
        :rowKey="'userId'"
        rowLabel="nickName"
        @onConfirm="onUserConfirm"
        rowLabelText="用户昵称"
        :maxNum="1"
      >
        <template #formSlot="{ handleQuery, filterForm }">
          <el-col :span="8">
            <el-form-item label="部门名称">
              <el-input
                size="small"
                @change="handleQuery"
                v-model="filterForm.deptName"
                clearable
                style="width: 100%"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户名称">
              <el-input
                size="small"
                @change="handleQuery"
                v-model="filterForm.userName"
                clearable
                style="width: 100%"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
        </template>
        <template #tableSlot>
          <el-table-column
            label="部门"
            align="center"
            key="deptName"
            prop="dept.deptName"
          />
          <el-table-column
            label="用户名称"
            align="center"
            key="userName"
            prop="userName"
          />
          <el-table-column
            label="用户昵称"
            align="center"
            key="nickName"
            prop="nickName"
          />
        </template>
      </TableSelect>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="submitLiuzhuan"> 确 认 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogFormVisible2" title="审核意见">
      <el-input
        placeholder="请输入"
        v-model="approvalForm.hiddenStateInfo"
        type="textarea"
      >
      </el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close2">取 消</el-button>
          <el-button type="primary" @click="submitApp"> 确 认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import formJson from "./components/options.json";
import { apis as APIS } from "@/api/yhpc/yhdj.js";
import { useAsyncData, useFormJson } from "@/views/hooks/useAsyncData.js";
import { deptTreeSelect, listUser } from "@/api/system/user";
import TableSelect from "@/components/tableSelect/index";
const { proxy } = getCurrentInstance();
const ops = useFormJson(formJson, {
  sort: [],
  sortable: [],
});

const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    ["hiddenSource", "hiddenType", "hiddenLevel", "hiddenCheckType"].includes(
      i.prop
    )
  ),
});
const files = ref([]);
const showSearch = ref(true);
const deptTree = ref([]);
const table = ref();
const userTableSelect = ref();

// 流转
const dialogFormVisible = ref(false);
const liuzhuanForm = ref({});
const openDialog = (row) => {
	dialogFormVisible.value = true;
	liuzhuanForm.value = {};
    let hiddenFrom = row.hiddenFrom;
    if (hiddenFrom && hiddenFrom=='1') {
  	  liuzhuanForm.value.hiddenInventoryId = row.hiddenId;
  	  liuzhuanForm.value.approvalFrom = '1';
    } else {
  	  liuzhuanForm.value.id = row.hiddenId;
  	  liuzhuanForm.value.approvalFrom = '0';
    }
};
const close = () => {
  dialogFormVisible.value = false;
  liuzhuanForm.value = {};
};
const onInnerOpen = () => {
  userTableSelect.value.open([]);
};
const zzData = ref([]);
const getZzSelect = () => {
  APIS.zz().then((res) => {
    zzData.value = res.rows;
  });
};
const columnZz = (id) => {
  return zzData.value.find((item) => item.id == id)?.deviceName;
};
const onUserConfirm = (data) => {
  const values = data.map((item) => item.value);
  const names = data.map((item) => item.label);
  liuzhuanForm.value.rectificationUserId = values.join(",");
  liuzhuanForm.value.rectificationUserName = names.join(",");
};
const submitLiuzhuan = () => {
  if (liuzhuanForm.value.rectificationUserId) {
	  if (liuzhuanForm.value.approvalFrom=='1') {
		APIS.updateRectificationUserName2(liuzhuanForm.value).then(() => {
		  close();
		  getList();
		});
	  } else {
		APIS.updateRectificationUserName(liuzhuanForm.value).then(() => {
		  close();
		  getList();
		});
	  }
	  

  }
};
const { fetchData, handleEdit, getList, queryParams, form } = useAsyncData({
  APIS: {
    ...APIS,
    // query: APIS.queryzg,
  },
  formJson,
  table,
  proxy,
});

watch(
  () => files,
  (newData) => {
    if (newData.value.length === 0) {
      form.value.hiddenImageFileName = "";
      form.value.hiddenImageFileId = "";
      form.value.hiddenImageFileUrl = "";
    } else {
      form.value.hiddenImageFileName = newData.value[0].name;
      form.value.hiddenImageFileId = newData.value[0].id;
      form.value.hiddenImageFileUrl = newData.value[0].url;
    }
  },
  {
    deep: true,
  }
);
onMounted(() => {
  getZzSelect();
  deptTreeSelect().then((response) => {
    deptTree.value = response.data;
  });
});

// 审批
const dialogFormVisible2 = ref(false);
const approvalForm = ref({});
const openApprovalDialog = (type, row) => {
  dialogFormVisible2.value = true;
  let hiddenFrom = row.hiddenFrom;
  if (hiddenFrom && hiddenFrom=='1') {
	  approvalForm.value.governConfirm = type;
	  approvalForm.value.hiddenInventoryId = row.hiddenId;
	  approvalForm.value.approvalFrom = '1';
  } else {
	  approvalForm.value.hiddenState = type;
	  approvalForm.value.id = row.hiddenId;
	  approvalForm.value.approvalFrom = '0';
  }
};
const close2 = () => {
  dialogFormVisible2.value = false;
  approvalForm.value = {};
  // approvalForm.value.hiddenState = "";
  // approvalForm.value.id = "";
  // approvalForm.value.hiddenStateInfo = "";
};
const submitApp = () => {
  if (approvalForm.value.hiddenStateInfo) {
	if (approvalForm.value.approvalFrom=='1') {
		APIS.updateHiddenState2(approvalForm.value).then(() => {
			close2();
			getList();
		});
	} else {
		APIS.updateHiddenState(approvalForm.value).then(() => {
			close2();
			getList();
		});
	}
  }
};
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
</style>
